<template>
	<view>
		<view class="main">
			<view class="car-sec">
				<view class="shade">
					<view class="bh">充电枪编号：CDZ00001</view>
					<view class="percent">
						50%
					</view>
					<view class="fz1">已充0.100度</view>
					<view class="fz2">更新于 2024-12-29 01:04:58</view>
					<view class="progress-bar">
						<view class="progress" style="width: 50%;">
							<text>50%</text>
						</view>
					</view>
				</view>
				<image src="../../static/images/img_02.jpg" class="img" mode="widthFix"></image>
			</view>
			<view class="nr-sec">
				<view class="number">
					<view class="tit">车牌号码</view>
					<view class="hm">粤E·DH666</view>
				</view>
				<view class="cenb">
					<view class="total">
						<image src="../../static/images/icon_07.png" class="ico" mode="widthFix"></image>您已充电 0 分钟
					</view>
					<view class="list1">
						<view class="grp">
							<view class="fz">已充金额</view>
							<view class="wz">
								<text>0.05</text>元
							</view>
						</view>
						<view class="grp flex-1">
							<view class="fz flex flex-pack-justify">
								账户余额
								<navigator url="" class="link" hover-class="none">
									去充值 <image src="../../static/images/icon_08.png" class="ico" mode="widthFix">
									</image>
								</navigator>
							</view>
							<view class="wz">
								<text>0.05</text>元
							</view>
						</view>
					</view>
					<view class="list2">
						<view class="grp">
							<view class="fz">实时电流</view>
							<view class="wz">
								<text>130.80</text>A
							</view>
						</view>
						<view class="grp">
							<view class="fz">实时电压</view>
							<view class="wz">
								<text>351.50</text>V
							</view>
						</view>
						<view class="grp">
							<view class="fz">实时功率</view>
							<view class="wz">
								<text>45.98</text>kW
							</view>
						</view>
					</view>
				</view>
				<button class="button">结束充电</button>
				<view class="tips">
					<image src="../../static/images/icon_06.png" class="ico" mode="widthFix"></image>充电完成，不及时驶离充电位会产生占位费
				</view>
			</view>

		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {

			}
		},
		onShow() {

		},
		onLoad() {

		},
		methods: {

		}
	}
</script>

<style lang="scss" scoped>
	@import url(@/batteryCharging/static/css/common.scss);

	.car-sec {
		position: relative;

		.img {
			width: 100%;
			display: block;
		}

		.shade {
			position: absolute;
			width: 100%;
			left: 0;
			top: 0;
			padding: 65rpx 0 0;
			text-align: center;
		}

		.bh {
			font-size: 28rpx;
			color: #666666;
		}

		.percent {
			font-size: 120rpx;
			color: #262626;
			font-weight: bold;
			margin: 35rpx 0;
			line-height: 1;
			font-family: 'Arial';
		}

		.fz1 {
			font-size: 28rpx;
			color: #262626;
			font-weight: 500;
		}

		.fz2 {
			font-size: 26rpx;
			color: #666666;
			margin-top: 6rpx;
		}

		.progress-bar {
			margin: 155rpx auto 0;
			width: 265rpx;
			height: 86rpx;
			border-radius: 6rpx;
			background: #788A98;
			padding: 2rpx;

			.progress {
				background: #3FD491;
				display: flex;
				align-items: center;
				justify-content: center;
				border-radius: 6rpx 0 0 6rpx;
				height: 100%;

				text {
					font-size: 24rpx;
					color: #fff;
					font-weight: 700;
				}
			}
		}
	}

	.nr-sec {
		padding: 0 20rpx 30rpx;
		margin-top: -60rpx;
		position: relative;
		z-index: 2;

		.number {
			padding: 17rpx 30rpx;
			margin-bottom: 20rpx;
			background-color: #fff;
			border-radius: 200rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.tit {
				font-size: 28rpx;
				color: #262626;
				font-weight: 700;
			}

			.hm {
				font-size: 28rpx;
				color: #262626;
				font-weight: 700;
				background: linear-gradient(180deg, #80E2AD 0%, #F7FCFA 100%);
				border: 0.8px solid #507764;
				width: 176rpx;
				height: 44rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				border-radius: 8rpx;
			}
		}



		.cenb {
			background-color: #fff;
			border-radius: 20rpx;
			padding: 25rpx 25rpx 20rpx;

			.total {
				font-size: 24rpx;
				color: #262626;

				.ico {
					width: 30rpx;
					height: 30rpx;
					margin-right: 10rpx;
				}
			}

			.list1 {
				padding: 25rpx 0;
				display: flex;


				.grp {
					padding-left: 30rpx;

					&:first-child {
						width: 300rpx;
						border-right: 1px solid #F0F0F0;
						padding-left: 0;
					}

					.fz {
						font-size: 24rpx;
						color: #666666;

						.link {
							color: #999;
							display: flex;
							align-items: center;

							.ico {
								width: 12rpx;
								margin-left: 7rpx;
							}
						}
					}


					.wz {
						font-size: 24rpx;
						color: #666;
						margin-top: 25rpx;

						text {
							font-size: 36rpx;
							color: #262626;
							font-weight: 700;
							font-family: 'Arial';
						}
					}
				}
			}

			.list2 {
				border-top: 1px solid #F0F0F0;
				padding: 25rpx 0;
				display: flex;
				justify-content: space-between;

				.grp {
					.fz {
						font-size: 24rpx;
						color: #666;
					}

					.wz {
						font-size: 20rpx;
						color: #666;
						margin-top: 8rpx;

						text {
							font-size: 28rpx;
							color: #262626;
							font-weight: 400;
							margin-right: 6rpx;
						}
					}
				}
			}
		}

		.button {
			font-size: 28rpx;
			color: #fff;
			font-weight: 700;
			width: 100%;
			height: 100rpx;
			line-height: 100rpx;
			border-radius: 12rpx;
			background: linear-gradient(124.39deg, #FE5E10 0%, #FF8045 99.31%);
			margin-top: 80rpx;
			border: 0;
		}

		.tips {
			font-size: 22rpx;
			color: #999;
			font-weight: 400;
			line-height: 34rpx;
			margin-top: 20rpx;
			text-align: center;

			.ico {
				width: 22rpx;
				height: 22rpx;
				margin-right: 8rpx;
				display: inline-block;
				vertical-align: middle;
			}
		}
	}
</style>